<template>
  <div class="max-1200" v-if="windowWidth>992">
    <div id="crumbs" class="max-1200">
      <img src="@/assets/icon/weizhi.png" alt="" class="ic" />

      <a href="/">{{globalLanguage.languageSuffix== 'Cn'?'首页':'Главная страница'}}</a> &gt;
      <router-link to="/new"> {{
          globalLanguage.languageSuffix === "Cn"
            ? "新闻公共"
            : "Общественная информация"
        }}</router-link>

    </div>
    <div style="display: flex; flex-wrap: wrap">
      <div style="
          width: 20%;
          padding: 0 20px;
          margin-top: 30px;
          margin-bottom: 20px;
        " v-for="item in newsList" :key="item"
      >
        <el-card @click="navigateToDetails(item.id)">
          <img
            :src="isHttp(item.imgUrl)"
            class="image"
            width="100%"
            height="150px"
          />
          <div style="margin-top: 20px; height: 30px">
            <span>{{ item["title" + globalLanguage.languageSuffix] }}</span>
          </div>
        </el-card>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin-bottom: 20px">
      <el-pagination
        :page-size="page.pageSize"
        :pager-count="page.pageNo"
        layout="prev, pager, next"
        :total="total * 1"
        @current-change="handlePage"
      />
    </div>
  </div>
  <div class="mbphone" v-else>
    <!--面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">{{ globalLanguage.languageSuffix === 'Cn'? '首页': 'главная'}}</el-breadcrumb-item>
      <el-breadcrumb-item >{{ globalLanguage.languageSuffix === 'Cn'? '新闻公共' : 'Новостное объявление' }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="news" @scroll="handleScroll1">
      <div class="tupian">
        <el-card v-for="news in newsList.records" class="news-card" :key="news.id" @click="navigateToDetails(news.id)"
                 v-if="news.id !==null  && news.id !== ''">
          <div class="image-container">
            <img
                :src="isHttp(news.imgUrl)"
            />
          </div>
          <template #footer>{{ globalLanguage.languageSuffix === 'Cn'? news.titleCn : news.titleRa }}</template>
        </el-card>
      </div>
      <div v-if="loading" class="loading-spinner">加载中...</div>
    </div>
  </div>



</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import { listNewsPage } from "@/api/news.js";
import { useRouter } from "vue-router";
import '@/style.css'
import {isHttp} from "@/utils/index.js";
const page = ref({
  pageNo: 1,
  pageSize: 10,
});
const total = ref(0);
const newsList = ref({total: 0, records: []});
const loading = ref(false);
const windowWidth = ref(window.innerWidth); // 用于判断当前窗口宽度
const loadNews = async () => {
  const res = await listNewsPage(page.value);
  if (res.code == 200) {
    newsList.value = res.newsIPage.records;
    total.value = res.newsIPage.total;
  }
};
const handlePage = (pno) => {
  page.value.pageNo = pno;
  loadNews();
};
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  if (windowWidth.value <= 992) {
     // 重置页码为1，因为可能需要重新加载第一页的数据
    news(); // 调用news函数重新加载数据
  }
};
onMounted(() => {
  loadNews(); // 初始化加载数据
  news(); // 初始加载数据
  windowWidth.value = window.innerWidth;
  window.addEventListener('resize', handleResize);
  /*滚动分页*/
  window.addEventListener('scroll', handleScroll1);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  // 移除监听
  window.removeEventListener('scroll', handleScroll1);
});
const router = useRouter();
const navigateToDetails = (id) => {
  // 使用路由参数导航
  router.push({ name: "newsDetail", query: { id: id } });
};
const news= async ()=> {
  if (loading.value) return; // 防止重复请求
  loading.value = true;
  //获取在宽度大于992px的情况下的pageNO
  if (windowWidth.value <= 992) {
    page.value.pageNo = 1; // 重置页码
  }
  console.log("当前页码 :", page.value.pageNo)
  const res= await listNewsPage(page.value);
  console.log("新闻列表数据 :", res.newsIPage)
  if (res.code === 200) {
    if (!Array.isArray(newsList.value.records)) {
      newsList.value.records = []; // 如果未定义，则初始化为一个空数组
    }
    // 合并新获取的数据
    newsList.value.records = newsList.value.records.concat(res.newsIPage.records||[]);
    total.value = parseInt(res.newsIPage.total);
    page.value.pageNo++;   // 页码加1
  }
  loading.value = false;
};

/*滚动分页*/
const handleScroll1= () => {
  if (!newsList.value || !newsList.value.records) return; // 确保 Newslist 正确初始化
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  if (scrollTop + windowHeight >= documentHeight - 100) { // 到达底部
    if (newsList.value.records.length < total.value) {
      news(); // 加载更多内容
    }
  }
}

</script>

<style scoped>
.mbphone{
  margin-top: -65px !important; /* 距离顶部87.5px */
}
.breadcrumb {
  position: fixed; /* 固定在视口 */
  top: 87.5px; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  background: white; /* 背景色 */
  z-index: 10; /* 确保在其他内容之上 */
  padding: 20px; /* 添加内边距 */
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
  padding: 5px;
  width: 100%;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
  width: 100%;
}

.news {
  padding-top: 70px; /* 根据面包屑的高度添加相应的内边距 */
  width: 100%;
  height: 100%;
  overflow: auto; /* 添加滚动条 */
}

.tupian {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 允许换行 */
  margin-bottom: 10px;
}

.news-card {
  width: 48%; /* 设置为48%以避免换行时的间距问题 */
  margin-bottom: 10px; /* 控制每个卡片之间的间距 */
}

.image-container {
  display: flex; /* 使外层容器是flexbox */
  align-items: center; /* 垂直居中图片 */
  justify-content: center; /* 水平居中图片 */
  height: 100px; /* 设置固定高度 */
  width: 100%; /* 填满父容器的宽度 */
}

.news-card img {
  height: 100px !important;
  width: 100%; /* 或设置为具体值，例如 100% */
  object-fit: fill; /* 填充整个img元素，可能剪裁cover */
}

.loading-spinner {
  text-align: center;
  margin: 20px 0;
}

</style>
